
//饼图
function pieEvt(pieData,lengendData,len,ele,color){
    var pie3Opt = {
        color:color,
        backgroundColor: 'transparent',
        legend: {
            show:false,
            orient: 'horizontal',
            top: '72%',
            data:lengendData,
            textStyle:{
                color:'#fff'
            }
        },
        tooltip : {
            trigger: 'item',
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(param){
                if(param.name){
                	return  '<div>'+param.name+'</div>' +
			        '<div>'+param.value+'  ('+param.percent+'%)</div>'
                }
    		},
            position:'right'
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['45%', '50%'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data: pieData
        },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };
    var pie3Chart = echarts.init(document.getElementById(ele))
    pie3Chart.setOption(pie3Opt)
    window.addEventListener("resize", function () {
        pie3Chart.resize();
    });
    var pieIndex = 0
    var pieAutoShow = function(){
        if (pieIndex >len-1){
            pieIndex = 0
        }
        for (var i = 0;i <len;i++){
            if (i != pieIndex){
                pie3Opt.series[0].data[i]['selected'] = false;
            }else{
                pie3Opt.series[0].data[i]['selected'] = true;
            }
        }
        //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
        //pie3Opt.series[1].data[0].label.normal.formatter=parseInt(Math.random()*99) + "%"
        pie3Opt.series[1].data[0].label.normal.formatter = (pie3Opt.series[0].data[pieIndex].value/allData(pieData)*100).toFixed(0) + "%"
        pie3Opt.series[1].data[1].label.normal.formatter = "\n" + pie3Opt.series[0].data[pieIndex].name
        pie3Chart.setOption(pie3Opt)
        pieIndex++
        setTimeout(pieAutoShow,1200)
    }
    pieAutoShow()
}

function allData(data){
	var allNum=0
	for(var a=0;a<data.length;a++){
		allNum+=data[a].value
	}
	return allNum
}
var pieData1=[
	{name:'便捷生活',value:144548},
	{name:'休闲游戏',value:76357},
	{name:'金融理财',value:64908},
	{name:'学习办公',value:58888},
	{name:'实用工具',value:53489},
	{name:'社交通讯',value:34009},
	{name:'新闻阅读',value:27761},
	{name:'出行导航',value:26977},
	{name:'医疗健康',value:25828},
	{name:'影音娱乐',value:18062},
	{name:'其它',value:83698}
]
var lengendData1=['便捷生活','休闲游戏','金融理财','学习办公','实用工具','社交通讯','新闻阅读','出行导航','医疗健康','影音娱乐','其它']
var color1=["#09a7e2","#b8ff2e","#09e24b","#09e2cb","#d40d03","#560081","#af0058", "#ff8700", "#ffe34e"];
pieEvt(pieData1,lengendData1,pieData1.length,"appPie1",color1)
var pieData2=[
	{name:'多特软件站',value:187866},
	{name:'91手游网',value:170895},
	{name:'阿果',value:141205},
	{name:'游迅网',value:114895},
	{name:'N多网',value:98804},
	{name:'虫虫游戏',value:31661},
	{name:'易玩',value:25773},
	{name:'56手机游戏',value:20744},
	{name:'电脑之家',value:7473},
	{name:'沙发管家',value:5766},
	{name:'其它',value:7261}
]
var lengendData1=['易乐游手机助手','360手机助手','百度手机助手','AppChina','搜狗市场','小米应用商城','9553下载','机锋市场','逗游网','新浪网','其它']
var color2=["#00a9e1","#0046af","#360293","#560081","#af0058",
"#ff8700", "#09a7e2", "#93dd6e","#fce24f","#b8ff2e","#09e24b","#09e2cb"];
pieEvt(pieData2,lengendData1,pieData2.length,"appPie2",color2)

//地图
var mapData=[
	{name:'崇明县',value:80},
	{name:'奉贤区',value:19},
	{name:'浦东新区',value:17},
	{name:'金山区',value:90},
	{name:'青浦区',value:100},
	{name:'松江区',value:31},
	{name:'嘉定区',value:37},
	{name:'宝山区',value:14},
	{name:'闵行区',value:13},
	{name:'杨浦区',value:42},
	{name:'普陀区',value:32},
	{name:'徐汇区',value:69},
	{name:'长宁区',value:25},
	{name:'闸北区',value:32},
	{name:'虹口区',value:69},
	{name:'黄浦区',value:13},
	{name:'静安区',value:94}
]
var geoCoordMap={}
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
var optionMap = {
		tooltip : {
			trigger : 'item',
			formatter : function(param) {
				// console.log(param)
				var value = 0;
				if(param.value[2]){
					value = param.value[2];
				}
				return '<div> '+ param.name+ 'APP数量：'+value+'</div>';
			}
		},
		geo : {
			show : true,
			zoom : 1.2,
			roam : false,
			map : '上海',
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#285ac6',
					borderWidth : 1,
					areaColor : '#123082',
					shadowBlur : 3,
					shadowColor : '#081435',
					shadowOffsetX : -4,
					shadowOffsetY : 8
				},
				emphasis : {
					areaColor : '#fce24f',
					borderColor : '#fce24f'
				}
			}
		},
		series : [ {
			type : 'map',
			zoom : 1.2,
			mapType : '上海',
			// geoIndex: 0,
			roam : false,
			label : {
				normal : {
					show : false,
					textStyle : {
						color : '#fff'
					}
				},
				emphasis : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			},
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#3770ea',
					borderWidth : 1,
					areaColor : '#0f2d87'
				},
				emphasis : {
					areaColor : '#2a56bd',
					borderColor : '#2a56bd',
				// opacity: 0.8,
				}
			},
			data : convertData(mapData)
		}, {
			name : 'Top 5',
			type : 'effectScatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 100 * 15 
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name : 'Top 5',
			type : 'scatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 100 * 15
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		} ]
};
var mapChart = echarts.init(document.getElementById('APPChina'))
mapChart.setOption(optionMap)
window.addEventListener("resize", function () {
    mapChart.resize();
});


//右下折线图
var timeData= ['2017/4/1','2017/5/1','2017/6/1','2017/7/1','2017/8/1','2017/9/1','2017/10/1','2017/11/1','2017/12/1','2018/1/1','2018/2/1','2018/3/1']
var data1=[430045,431075,431291,433292,435421,437556,500404,546193,547128,547677,589694,596946]
//var data2 = [1,1,3366,45662,9085,20811,158238,382692,435564,1313,10158,93,7632,19576,22058,962,8635]
var lineOption = {
    color : ["#1de5f2","#0edf4d"],
    legend: {
    	show:true,
    	textStyle:{
    			color: 'rgba(255,255,255,0.8)'
    		}
    },
    tooltip : {
        trigger: 'axis',
    },
    grid: {
        top:30,
        left: '3%',
        right: '3%',
        bottom: 10,
        containLabel: true
    },
    xAxis: {
        boundaryGap : false,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            },
            rotate : 45
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        data : timeData
    },
    yAxis : {
    	//type:'log',
    	//logBase:10,
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true   //刻度线
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#fff"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            name:'app数量',
            type:'line',
            smooth:true,
            symbol:'none',  //这句就是去掉点的
            lineStyle: { normal: {
                color:'#1de5f2',
            }},
            areaStyle: {
                normal: {
                    color:'#1de5f2',
                    opacity: 0
                }
            },
            data:data1
        }
    ]
};
var lineChart = echarts.init(document.getElementById('appLine'))
lineChart.setOption(lineOption);
window.addEventListener("resize", function () {
    lineChart.resize();
});




